웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용하여 옵션에 있는 값을 선택할때마다 해당하는 값을 더하는 방법은? 아래에서 알아봅니다. 먼저 html을 사용하여 입력폼을 만들어봅니다. 사용자가 select의 옵션을 선택할 수 있으며 더해진 값은 하단의 input 태그에 합산되어 나타납니다.
이제 옵션값을 선택할때마다 값이 추가되어 합산된 값이 input태그에 나타나게됩니다. 간단한 예제입니다.
! html 코드 보기
<body>
<h4># Select your favorite item(s)</h4>
<select onchange="sumPrice(event)">
<option value="10">10</option>
<option value="100">100</option>
<option value="1000">1000</option>
</select>
<input id="totalCount" value="0" />
</body>
만약 select가 선택되었는지 그리고 값이 변경되었는지는 자바스크립트의 onchange를 사용하여 이벤트를 실행하도록 하였습니다. 그럼 아래는 스크립트 코드입니다. 여기서는 선택된 값을 기존의 전체값과 더해서 보여주는 부분이 수행됩니다.<h4># Select your favorite item(s)</h4>
<select onchange="sumPrice(event)">
<option value="10">10</option>
<option value="100">100</option>
<option value="1000">1000</option>
</select>
<input id="totalCount" value="0" />
</body>
test = {
totalValue: 0,
// Sum and show total price
sumPrice: function() {
var selectedPrice = ~~event.target.value;
this.totalValue = this.totalValue + selectedPrice;
formEle = document.querySelector('#totalCount');
formEle.value = this.totalValue;
}
};
totalValue: 0,
// Sum and show total price
sumPrice: function() {
var selectedPrice = ~~event.target.value;
this.totalValue = this.totalValue + selectedPrice;
formEle = document.querySelector('#totalCount');
formEle.value = this.totalValue;
}
};
이제 옵션값을 선택할때마다 값이 추가되어 합산된 값이 input태그에 나타나게됩니다. 간단한 예제입니다.
# 예제코드 직접 해보기
아래에서 직접 선택해보세요. 위 코드를 실행한 모습입니다.아래의 글도 찾고 계시지 않나요?
